<template>
    <div>
        <div class="selection-title">
            <span>{{selectionTabsTitle}}(多选)</span>
        </div>
        <div class="selection-list">
            <ul class="one-level-menu-ul">
                <li class="one-level-menu-li" v-for="(item,index) in checkBoxListVar" @change="clickCheckbox(index,item.name)" :key='index'>
                    <div class="checkbox-item">
                        <input type="checkbox" class="input-checkbox" :id="index" v-model="item.status">
                        <label :for="index" class="checkbox-label">{{item.name}}</label>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  props: {
    checkBoxListVar:{
      type:Array,
    },
    selectionTabsTitle:{
      type:String
    } 
  },
  computed: {
      charr(){
          return this.$store.state.leftMoreMenu
      }
  },

  watch: {
      checkBoxListVar(){
          let arr = [];
          arr[0] = this.checkBoxListVar[0].name;
          this.$store.commit("getLeftMoreMenu", arr);
      }
  },

  methods: {
      clickCheckbox(index,name){
          this.checkBoxListVar.forEach((el,i)=>{
              if(i == index){
                  if(el.status){
                    el.status = 1;
                    this.charr.push(el.name);
                  }else{
                    el.status = 0;
                    var start=this.charr.indexOf(el.name);
                    this.charr.splice(start,1);
                  }
              }
          });   
          this.$store.commit("getLeftMoreMenu", this.charr);
      }
  }
};
</script>
<style lang='less' scoped>
@import url(../../../assets/css/layoutLeftBottomSelection/leftSelection.less);
</style>